<template>
    <div>
      <h2 style="text-align: center">JavaScript高级部分知识小结</h2>
      <h2>多选框问题</h2>
<!--      <el-checkbox v-model="finalList"></el-checkbox>-->
<!--      :label="item.id" 这里绑定的是id-->
      <el-checkbox-group v-model="finalList" @change="listChange">
          <el-checkbox v-for="item in list"
                       :label="item.id"
                       :key="item.key">{{item.label}}: xxx :<input type="text" :disabled="!finalList.includes(item.id)"  v-model="item.value2"></el-checkbox>
        <br>

      </el-checkbox-group>


    </div>
</template>

<script>
    export default {
        name: "JsSenior",
        components:{

        },
        data(){
          return{
            list:[
              {
                id:"1",
                label:"键1",
                key:"key1",
                value:"value1",
                value2:"value11"
              },
              {
                id:"2",
                label:"键2",
                key:"key2",
                value:"value2",
                value2:"value22"
              },
              {
                id:"3",
                label:"键3",
                key:"key3",
                value:"value3",
                value2:"value33"
              },
            ],
            finalList:[]
          }
        },
        computed:{

        },
        methods:{
          listChange(finalList){
            this.finalList = finalList

            // console.log(finalList)
            console.log(this.finalList)
            console.log(this.list)

            // 取出finalList的id 与list 进行对比 找出id一样的数据
          }
        },
    }
</script>

<style scoped>

</style>
<!--




